import {
  Transition,
  defineComponent,
  computed,
  watchEffect,
  Teleport,
} from "vue";
import "./style.css";

export const HModal = defineComponent({
  name: "HModal",
  components: { Transition },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "TITLE",
    },
    top: {
      type: String,
      default: "50%",
    },
    left: {
      type: String,
      default: "50%",
    },
    width: {
      type: String,
      default: "600px",
    },
    height: {
      type: String,
      default: "380px",
    },
  },
  emits: ["update:visible", "close", "open"],
  setup(props, { slots, emit }) {
    const closeHandler = () => emit("update:visible", false);

    const computedStyle = computed(() => {
      return {
        top: props.top,
        left: props.left,
        width: props.width,
        height: props.height,
        transform: "translate(-50%, -50%)",
      };
    });

    watchEffect(() => (props.visible ? emit("open") : emit("close")));

    return () => {
      return (
        <Teleport to="body">
          <Transition name="scale" appear>
            {props.visible && (
              <div class="bg-[rgba(19,27,51,0.80)] backdrop-blur-[5px] fixed left-0 top-0 z-10000 h-100vh w-100vw flex items-center justify-center">
                <section
                  style={computedStyle.value}
                  class="scene-modal position-fixed left-50% top-50% h-150 w-300 border-1 border-#ff0000 rounded-[1px]"
                >
                  <div class="scene-modal-close"
                    onClick={closeHandler}>×</div>
                  {slots.default?.()}
                </section>
              </div>
            )}
          </Transition>
        </Teleport>
      );
    };
  },
});
